<style>

</style>

<template>


  <div class="user">
    <el-tabs v-model="activeTab" type="card" style="width: 1300px;border: none">
      <!--          模糊查询-->
      <el-form ref="form" :model="form" label-width="30px">
        <el-form-item label="">
              <span v-show="activeTab=='healthArchives'">
                流水号：<el-input v-model="form.serialNumber" style="margin-right: 30px;width: 200px"></el-input>
              </span>
          用户ID：
          <el-input v-model="form.id" style="margin-right: 20px;width: 200px"></el-input>
          <span v-show="activeTab!='healthArchives'">
          用户昵称：
          <el-input v-model="form.name" style="margin-right: 20px;width: 200px"></el-input>
          </span>
          <span v-show="activeTab=='healthArchives'">
          用户昵称：
          <el-input v-model="form.uname" style="margin-right: 20px;width: 200px"></el-input>
          </span>
          <span v-show="activeTab!='healthArchives'">
            真实姓名：<el-input v-model="form.zname" style="margin-right: 20px;width: 200px"></el-input>
          </span>

          手机号码：
          <el-input v-model="form.mobilePhone" style="margin-right: 20px;width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="">
        <span v-show="activeTab!='healthArchives'">
            电子邮箱：<el-input v-model="form.electronicMailbox" style="margin-right: 20px;width: 185px"></el-input>
        </span>

          <span v-show="activeTab=='healthArchives'">
            审核类型：
          <el-select v-model="form.audit" placeholder="全部" style="width: 183px;margin-right: 20px">
            <el-option label="全部" value=""></el-option>
            <el-option label="用户头像" value="1"></el-option>
            <el-option label="用户昵称" value="2"></el-option>
          </el-select>
         </span>

          <span v-show="activeTab!='healthArchives'">
                 用户身份：
          <el-select v-model="form.identity" placeholder="全部身份" style="width: 200px;margin-right: 20px">
            <el-option label="全部身份" value=""></el-option>
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="VIP用户" value="2"></el-option>
          </el-select>
          </span>

          <span v-show="activeTab!='healthArchives'">注册时间：</span>
          <span v-show="activeTab=='healthArchives'">提交时间：</span>
          <el-select v-model="form.ztime" placeholder="全部" style="width: 200px;margin-right: 20px">
            <el-option label="全部" value=""></el-option>
            <el-option label="近三个月" value="1"></el-option>
            <el-option label="今年内" value="2"></el-option>
            <el-option label="2022年" value="3"></el-option>
            <el-option label="2021年" value="4"></el-option>
            <el-option label="2020年" value="5"></el-option>
            <el-option label="2020年以前" value="6"></el-option>
          </el-select>
          <span v-show="activeTab=='healthArchives'">
            审核状态：
          <el-select v-model="form.status" placeholder="全部状态" style="width: 200px;margin-right: 20px">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="审核中" value="2"></el-option>
            <el-option label="审核通过" value="3"></el-option>
            <el-option label="审核拒绝" value="4"></el-option>
          </el-select>
          </span>
          <span v-show="activeTab!='healthArchives'">
            用户状态：
          <el-select v-model="form.userStatus" placeholder="全部状态" style="width: 200px;margin-right: 20px">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="已禁用" value="2"></el-option>
            <el-option label="已注销" value="3"></el-option>
          </el-select>
          </span>
          <span v-show="activeTab=='healthArchives'">
            审核人：<el-input v-model="form.reviewers" style="margin-right: 20px;width: 210px"></el-input>
        </span>
        </el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button v-show="activeTab!='healthArchives'" type="primary" @click="findAllUser">搜索</el-button>
        <el-button v-show="activeTab=='healthArchives'" type="primary" @click="findAllAudit">搜索</el-button>
      </el-form>
      <el-tab-pane label="用户和信息审核" name="healthArchives">
        <el-card style="border-color: white">

          <!--          表格部分-->
          <el-table :data="tableDataAudit" style="width: 100%">
            <el-table-column prop="serialNumber" label="流水号"></el-table-column>
            <el-table-column prop="uid" label="用户ID"></el-table-column>
            <el-table-column prop="uname" label="用户昵称"></el-table-column>
            <el-table-column prop="mobilePhone" label="手机号码"></el-table-column>
            <el-table-column prop="" label="审核类型">
              <template slot-scope="scope">
                {{ scope.row.audit == 1 ? '用户头像' : '用户昵称' }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="新信息">
              <template slot-scope="scope">
                <img v-show=" scope.row.audit == 1" :src="scope.row.newInformation" width="30px">
                <span v-show=" scope.row.audit ==2">{{ scope.row.newInformation }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="旧信息">
              <template slot-scope="scope">
                <img v-show=" scope.row.audit == 1" :src="scope.row.oldInformation" width="30px">
                <span v-show=" scope.row.audit ==2">{{ scope.row.oldInformation }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="submissionTime" label="提交时间"></el-table-column>
            <el-table-column prop="" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.status == 1 ? '待审核' : scope.row.status == 2 ? '审核中' : scope.row.status == 3 ? '审核通过' : scope.row.status == 4 ? '审核拒绝' : ''
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    v-show="scope.row.status==1"
                    type="text"
                    size="small"
                    @click="auditXq(scope.row)"
                >查看并处理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="current1"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1">
          </el-pagination>
        </el-card>
      </el-tab-pane>



      <el-tab-pane label="所有用户" name="healthRecords">
        <el-card style="border-color:white">
          <!--          表格部分-->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="" label="ID">
              <template slot-scope="scope">
                <span @click="userXq(scope.row)">{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="昵称"></el-table-column>
            <el-table-column prop="mobilePhone" label="手机号码"></el-table-column>
            <el-table-column prop="electronicMailbox" label="邮箱"></el-table-column>
            <el-table-column prop="count" label="近90日下单"></el-table-column>
            <el-table-column prop="lastAccessedTime" label="最近访问时间"></el-table-column>
            <el-table-column prop="registration" label="注册时间"></el-table-column>
            <el-table-column prop="" label="状态">
              <template slot-scope="scope">
                {{ scope.row.userStatus == 1 ? '正常' : scope.row.userStatus == 2 ? '已锁定' : '已注销' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.userStatus === 1"
                    @click="lockk(scope.row)"
                >锁定用户
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.userStatus === 2"
                    @click="unlockk(scope.row)"
                >解锁用户
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>


          <!--          锁定账号的弹出框-->
          <el-dialog title="确定锁定该用户？" :visible.sync="dialogFormVisible">
            用户账号被锁定后将无法下单、评价、请谨慎操作！<br>
            <el-form :model="lockUser" style="margin-top: 25px">
              <el-form-item label="锁定原因：" style="width: 300px">
                <el-select v-model="lockUser.lockk" placeholder="请选择原因" style="width: 200px">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="账号出现问题" value="1"></el-option>
                  <!--        <el-option label="" value="1"></el-option>-->
                </el-select>
              </el-form-item>
              <el-form-item label="补充说明：">
                <el-input placeholder="请输入" v-model="lockUser.supplement" style="width: 600px"></el-input>
                0/200（选填）
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
            </div>
          </el-dialog>


          <!--          解锁的弹框-->
          <el-dialog title="确定解锁该用户？" :visible.sync="dialogFormVisible2">
            用户解锁后将恢复下单、评价、请谨慎操作！<br>
            <div slot="footer" class="dialog-footer" style="margin-top: 20px">
              <el-button @click="dialogFormVisible2 = false;qx()">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible2 = false;qd()">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>

export default {
  data() {
    return {
      activeTab: 'healthArchives',
      form: {},
      tableData: [
        // 这里是你的数据，格式与截图中的数据相同
      ],
      tableDataAudit: [],
      current: 1,
      pageSize: 10,
      total: 0,
      current1: 1,
      pageSize1: 10,
      total1: 0,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      lockUser: {},
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.findAll();
    },
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.findAllUser();
    },
    handleCurrentChange1(val) {
      this.current1 = val;
      this.findAllUser();
    },


    //   查询用户所有
    findAllUser() {
      this.axios.post(`http://localhost:8000/xm-client/xm-user/findAll?current=${this.current}&pageSize=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (this.current > res.data.data.pages) {
          this.current = res.data.data.pages;
          this.findAllUser();
        }
      })
    },

    //   查询审核的用户
    findAllAudit() {
      this.axios.post(`http://localhost:8000/xm-client/xm-audit/findAll?current=${this.current1}&pageSize=${this.pageSize1}`, this.form).then(res => {
        this.tableDataAudit = res.data.data.records;
        this.total1 = res.data.data.total;
        if (this.current1 > res.data.data.pages) {
          this.current1 = res.data.data.pages;
          this.findAllAudit();
        }
      })
    },


    //   重置的方法
    reset() {
      this.form = {};
    },


    // 跳转到用户详情的方法
    userXq(row){
      localStorage.setItem("user", JSON.stringify(row));
      this.$router.push('/userxq')
    },


    //   锁定账号
    lockk(row) {
      this.dialogFormVisible = true;
      this.lockUser = row;
    },

    //   解锁账号
    unlockk(row) {
      this.dialogFormVisible2 = true;
      this.lockUser = row;
    },

    //   取消弹框里的数据
    qx() {
      this.lockUser = {};
    },

  //   锁定/解锁用户的方法
    qd(){
      if(this.lockUser.lockk==""){
        this.$message({
          message: '请选择锁定原因',
          type: 'warning'
        });
        this.dialogFormVisible=true
        return;
      }
      if(this.lockUser.userStatus==1){
        this.lockUser.userStatus=2;
      }else{
        this.lockUser.lockk="";
        this.lockUser.supplement='';
         this.lockUser.userStatus=1;
      }

      console.log(this.lockUser);

      this.axios.post(`http://localhost:8000/xm-client/xm-user/lockk`,this.lockUser).then(res=>{
        if(res.data.code==200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        this.qx();
        this.findAllUser();
      })
    },


  //   跳转到审核详情页面
    auditXq(row){
      this.$router.push({path:'/auditXq',query:{id:row.id}})
    },
  },

  created() {
    this.findAllUser();
    this.findAllAudit();
  }

}
</script>
